import './WJHConstruction.scss'
import { Select } from 'antd'

import { TextList001 } from '../Common/TextList'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'

const mapping = [
    { label: '表面层', value: '表面层' },
    { label: '粘层', value: '粘层' },
    { label: '中面层', value: '中面层' },
    { label: '下面层', value: '下面层' },
    { label: '上基层', value: '上基层' },
    { label: '下封层', value: '下封层' },
    { label: '透层', value: '透层' },
    { label: '中基层', value: '中基层' },
    { label: '联接层', value: '联接层' },
    { label: '下基层', value: '下基层' },
    { label: '底基层', value: '底基层' },
]

const A01List = [
    { uuid: 1, label: '施工路段:', value: 'constructionPartScope' },
    { uuid: 2, label: '设计厚度(cm):', value: 'designThickness' },
    { uuid: 3, label: '弯沉代表值(mm):', value: 'bendValue' },
]

const Top = [
    { uuid: 1, label: '桩号', value: 'detectionPosition', flex: 1 },
    { uuid: 2, label: '压实度(%)', value: 'compactness', flex: 1 },
    { uuid: 3, label: '实测厚度(cm)', value: 'actualThickness', flex: 1 },
    { uuid: 4, label: '距中心点距离(mm)', value: 'orderNum', flex: 1 },
]
export const WJHConstructionA01 = () => {
    const [Active, setActive] = useState('底基层')
    const [DataA01, setDataA01] = useState({ constructionPartScope: '--', designThickness: '--', bendValue: '--' })
    const [DataList, setDataList] = useState([])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.code === 200 && res?.data) {
                const { parts, ...data } = res.data
                setDataA01(data)
                setDataList(parts)
            } else {
                setDataA01({ constructionPartScope: '--', designThickness: '--', bendValue: '--' })
                setDataList([])
            }
        },
    })
    useEffect(() => {
        runAsync({ url: 'getWJHscreenRoadConsInsApi', data: { constructionLayer: Active } })
    }, [runAsync, Active])

    return (
        <div className="WJHConstructionA01">
            <Select value={Active} options={mapping} onChange={setActive} />
            <div>
                {A01List.map(({ uuid, label, value }) => (
                    <div key={uuid}>
                        <div>{label}</div>
                        <div>{DataA01[value]}</div>
                    </div>
                ))}
            </div>
            <TextList001 Top={Top} data={DataList} />
        </div>
    )
}
